"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/8
 */
import * as React from 'react'
import MyText from "../../component/MyText";
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";


const {View, ScrollView, Linking, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');

const NavigationBar = require('react-native-navbar').default;
import NavBackButton from "../../component/BackButton";
import {orderDetailProducts, orderList} from "../../assets/data";
import Colors from "../../assets/styles/Colors";
import MyIcon from "../../component/icon";
import Line from "../../component/Line";
import ProductItem from "../../component/ProductItem";
import {OrderComponent, OrderDetailComponent} from "../../interface/index";
const  SimpleIcon  = require( 'react-native-vector-icons/SimpleLineIcons').default;



class OrderDetailPage extends React.Component<OrderDetailComponent, any> {
    constructor(props: any, context: any) {
        super(props, context);
    }


    componentDidMount(): void {
    }


    callRider = (phone)=>{
        const url = `tel:${phone}`;
        Linking.canOpenURL(url).then(supported => {
            if (!supported) {
                console.log('Can\'t handle url: ' + url);
            } else {
                return Linking.openURL(url);
            }
        }).catch(err => console.error('An error occurred', err));
    };

    renderRider = () => {
        const {orderItem} = this.props;
        if (orderItem.get_big.get_rider) {
            return (
                <View style={{marginTop:10}}>
                    <View style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10}]}>
                        <MyText>{`骑手姓名：${orderItem.get_big.get_rider.username}`}</MyText>
                    </View>
                    <Line/>
                    <TouchableOpacity style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10,justifyContent:'space-between'}]} onPress={this.callRider.bind(this,orderItem.get_big.get_rider.phone)}>
                        <MyText>{`骑手联系方式：${orderItem.get_big.get_rider.phone}`}</MyText>
                        <SimpleIcon name={'arrow-right'} color={'#333'} size={14}/>
                    </TouchableOpacity>
                </View>
            )
        } else {
            return null;
        }
    };

    render() {
        const {orderItem} = this.props;
        console.log('订单详情', orderItem);
        return (
            <View style={commonStyles.container}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton/>}
                               title={{title: '订单详情', tintColor: '#fff'}}
                />
                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <View style={{backgroundColor: Colors.White, padding: 15}}>
                            {/*收件人*/}
                            <MyText numberOfLines={1} color={Colors.Black}
                                    fontSize={20}>{orderItem.get_adder.accepter}<MyText
                                numberOfLines={1} fontSize={14}>{orderItem.get_adder.telphone}</MyText></MyText>
                            {/*地址*/}
                            <MyText
                                numberOfLines={0}>{`地址：${orderItem.get_adder.address}${orderItem.get_adder.address_detail}`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow, {
                            backgroundColor: Colors.BgColor,
                            padding: 10,
                            alignItems: 'center',
                            marginTop: 10
                        }]}>
                            <MyIcon name={'icon-shop'} color={Colors.Primary}/>
                            <MyText style={{marginLeft: 10}}>{this.props.auth.profile.store_name}</MyText>
                        </View>

                        {orderItem.get_order_info.map((item, index) => (

                            <View key={index}>
                                {/*商品*/}
                                <ProductItem {...item}/>
                                {index === orderDetailProducts.length - 1 ? null :
                                    <Line height={10} color={Colors.White}/>}
                            </View>
                        ))}
                        <Line/>
                        <View style={[commonStyles.flexRow, {
                            backgroundColor: Colors.White,
                            padding: 10,
                            justifyContent: 'space-between',
                            marginTop: 10
                        }]}>
                            <MyText>订单总价</MyText>
                            <MyText color={Colors.Active}>¥<MyText
                                color={Colors.Active}>{Number(orderItem.totalprice).toFixed(2)}</MyText></MyText>
                        </View>
                        <Line/>
                        {this.renderRider()}
                        <View
                            style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10, marginTop: 10}]}>
                            <MyText>{`买家留言：${orderItem.get_big ? orderItem.get_big.leaving_message : ''}`}</MyText>
                        </View>
                        <Line/>
                        <View style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10}]}>
                            <MyText>{`订单编号：${orderItem.order_number}`}</MyText>
                        </View>
                        <View style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10,}]}>
                            <MyText>{`下单时间：${orderItem.created_at}`}</MyText>
                        </View>
                        <Line/>
                        {/*<View style={[commonStyles.flexRow, {backgroundColor: Colors.White, padding: 10,}]}>*/}
                        {/*<MyText>{`骑手配送费：5元`}</MyText>*/}
                        {/*</View>*/}
                    </ScrollView>
                </View>

            </View>
        );
    }
}


export default connect(
    ({auth, order}) => ({auth, order})
)(OrderDetailPage);